<script lang="ts" setup>

import {
  uploading,
  uploadProgress
} from "@/views/documentManager/components/ts/uploadFile";
import {ref} from "vue";
import {message} from "@/utils/ElmessasgeUtils";
import {uploadFileViaUrl} from "@/api/documentManage/minioManager2";
import {currentBucketName, currentPath} from "@/views/documentManager/components/ts/FileBrowser";

const fileUrl = ref('');
const fileName = ref('');

// 定义事件
const emit = defineEmits(['uploadSuccess', 'uploadError']);

// URL上传的函数
const confirmUploadFromUrl = async () => {
  // 验证URL输入
  if (!fileUrl.value || uploading.value) {
    message('请输入有效的URL地址', 'warning');
    return;
  }

  if (!fileName.value || uploading.value) {
    message('请输入有效的URL文件名', 'warning');
    return;
  }

  try {
    // 尝试解析URL，确保格式正确
    new URL(fileUrl.value);
  } catch (e) {
    message('请输入有效的URL地址', 'error');
    return;
  }

  uploading.value = true;

  try {
    uploadProgress.value = 0
    let res: any = await uploadFileViaUrl({
      bucket: currentBucketName.value,
      url: fileUrl.value,
      objectName: `${currentPath.value}/${fileName.value}`,
    })
    uploadProgress.value = 100;

    if (res.data.code === 200) {
      message('文件已成功从URL上传', 'success');
    } else {
      message("上传文件失败" + res.data.msg, 'error');
    }

    fileUrl.value = '';
    emit('uploadSuccess', fileName.value);


  } catch (err: any) {
    console.error('URL上传错误:', err);
    message(err.response?.data?.message || err.message || 'URL上传过程中发生错误', 'error');
  } finally {
    uploading.value = false;
  }
};

</script>

<template>
  <div class="file-upload">
    <div class="upload-area">
      <div class="upload-icon">
        <svg fill="none" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 15V3M12 3L8 7M12 3L16 7" stroke="#2196F3" stroke-linecap="round" stroke-width="2"/>
          <path d="M20 17V19C20 20.1046 19.1046 21 18 21H6C4.89543 21 4 20.1046 4 19V17" stroke="#2196F3"
                stroke-linecap="round" stroke-width="2"/>
          <path d="M12 17H16M12 21H16" stroke="#2196F3" stroke-linecap="round" stroke-width="2"/>
        </svg>
      </div>
      <p class="upload-text">输入文件URL地址进行上传,要求url 有效且可访问</p>
      <div>
        <div class="url-input-area">
          <input
              v-model="fileUrl"
              :disabled="uploading"
              class="url-input"
              placeholder="请输入文件URL地址"
              type="text"
          >
        </div>

        <div class="url-input-area">
          <input
              v-model="fileName"
              :disabled="uploading"
              class="url-input"
              placeholder="请输入文件名称"
              type="text"
          >
        </div>

      </div>

    </div>
    <div class="modal-actions">
      <button
          :class="{ 'uploading': uploading }"
          class="upload-button"
          @click="confirmUploadFromUrl"
      >
        <span v-if="!uploading">上传文件</span>
        <span v-else class="uploading-text">
            <span class="spinner"></span>
            上传中 {{ uploadProgress }}%
          </span>
      </button>
    </div>
  </div>

</template>

<style scoped>

.file-upload {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.upload-area {
  border: 2px dashed #dcdfe6;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 20px;
  background: #fafafa;
}

.upload-area:hover {
  border-color: #409eff;
  background: #f0f7ff;
}

.url-input-area {
  margin-top: 20px;
  text-align: left;
  width: 100%;
}

.url-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.url-input:focus {
  outline: none;
  border-color: #2196F3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}

.upload-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.modal-actions button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.modal-actions button:not(.danger) {
  background-color: #f0f0f0;
}

.modal-actions button:not(.danger):hover {
  background-color: #e0e0e0;
}

.modal-actions button.danger {
  background-color: #f44336;
  color: white;
}

.modal-actions button.danger:hover {
  background-color: #d32f2f;
}

.preview-modal .modal-content {
  max-width: 90%;
  max-height: 90vh;
  width: 800px;
  display: flex;
  flex-direction: column;
}


</style>